<template>
  <el-dialog
    v-model="props.visible"
    title="保存/更新流程"
    width="600"
    @opened="onOpened"
    @closed="emit('update:visible', false)"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="formRef"
      label-width="100px"
      class="demo-form"
      label-position="right"
      size="default"
      style="width: 80%"
      v-loading="loading"
    >
      <el-form-item label="名称" prop="name" :label-width="defaultLabelWidth">
        <el-input :disabled="!isNew" size="default" type="text" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="type" :label-width="defaultLabelWidth">
        <el-input size="default" type="text" v-model="form.type"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="des" :label-width="defaultLabelWidth">
        <el-input size="default" type="textarea" v-model="form.des"></el-input>
      </el-form-item>
      <el-form-item label="版本" prop="workflowId.versionNo" :label-width="defaultLabelWidth">
        <el-input size="default" type="number" v-model="form.versionNo"></el-input>
      </el-form-item>
      <el-form-item label="版本描述" prop="versionDescription" :label-width="defaultLabelWidth">
        <el-input size="default" type="textarea" v-model="form.versionDescription"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="cancel" size="default">取 消</el-button>
      <el-button type="primary" @click="confirm" size="default">确 定</el-button>
    </template>
  </el-dialog>
</template>
  
  <script setup>
import { reactive, ref, unref ,computed} from 'vue'
import { ElDialog, ElCard, ElText, ElForm, ElFormItem, ElInput, ElButton } from 'element-plus'
import { useWorkflowDesignStore } from '@/stores/workflowDesign'

const props = defineProps({
  visible: {
    default: false
  },
  value: {
    default: () => ({})
  }
})

const emit = defineEmits(['update:visible', 'closed',"updateflow"])

const defaultLabelWidth = ref('80px')

const loading = ref(false)

const formRef = ref(null)

const form = ref({
  name: '',
  type: '',
  des: '',
  workflowId: {
    id: '',
    versionNo: 1
  },
  versionNo: 1,
  versionDescription: ''
})

const isNew = computed(() => {
  return form.value.workflowId.id && form.value.workflowId.id.length > 0 && !form.value.workflowId.id.indexOf('00000')>-1
})

const rules = ref({
  name: [{ required: true, message: '请输入', trigger: 'change' }],
  'workflowId.versionNo': [{ required: true, message: '请输入', trigger: 'change' }]
})

const workflowDesignStore = useWorkflowDesignStore();

const loadData = async (value) => {
  loading.value = true
  form.value = Object.assign(form.value, unref(value))
  form.value.versionNo = form.value.workflowId.versionNo
  loading.value = false
}

const onOpened = () => {
  loadData(props.value)
}
const cancel = () => {
  emit('update:visible', false)
}
const confirm = () => {
  updateWorkflow()
}

const updateWorkflow = async () => {
  if (formRef.value) {
    formRef.value.validate(async (valid) => {
      if (valid) {
        try {
          loading.value = true
          form.value.workflowId.versionNo = form.value.versionNo
          const res = await workflowDesignStore.createOrUpdateWorkFlow(form.value)
          form.value.workflowId.id = res.id 
          loading.value = false
          emit('update:visible', false)
          emit('updateflow', form.value)
        } finally {
          loading.value = false
        }
      }
    })
  }
}
</script>

<style lang="less" scoped>
:deep(.update-bg-blue) {
  background-color: #d9ecff;
}
:deep(.update-bg-white) {
  background-color: white;
}
.mgb-5 {
  margin-bottom: 5px;
}
</style>